<template lang='pug'>
.shopping
  .header()
    p.iconfont.icon-fanhui(@click='$router.push("/")')
    p.title 购物车
    p.seek.iconfont.icon-sousuo
  .center
    ShopFir(v-for="d in locList" :item="d" @flgto='flgto' @change="change" @del="del")
  .bottomBnt
      .range
        p 共{{zong.num}}件金额：
          span {{zong.zongj}} 
          time 元
      button.letgo 继续购物
      button.pricDiu(@click="huaqian") 去结算
</template>
 
<script>
import Vue from 'vue'
import ShopFir from '../components/ShopFir.vue'
import { Dialog } from 'vant';
Vue.use(Dialog);
export default {
  name: "vueName",
  data() {
    return {
      locList: JSON.parse(localStorage.getItem('Lover')) || []
    };
  },
  created(){
    document.documentElement.scrollTop = 0
    this.$store.commit('setIsShow',false)
  },
  methods:{
    flgto(id){
      console.log(id)
      let zindex = this.locList.findIndex(item=> item.id == id)
      this.locList[zindex].flg = !this.locList[zindex].flg
    },
    change(val){
      let zindex = this.locList.findIndex(item=> item.id == val[1])
      this.locList[zindex].num = val[0]
    },
    del(id){
      console.log(id)
      let zindex = this.locList.findIndex(item=> item.id == id)
      console.log(zindex)
      this.locList.splice(zindex,1)
    },
    huaqian(){
      if(this.locList.some(item=>item.flg)){
        this.$router.push('/addren-ding')
      }else{
        Dialog({ message: '至少选择一件商品' });
      }
      
    }
  },
  components:{
    ShopFir
  },
  computed:{
    zong(){
      let zongj = 0;
      let num = 0;
      this.locList.forEach(item=>{
        if(item.flg){
          zongj += item.num * item.price
          num += item.num
        }
      })
      return {
        zongj,
        num
      }
    }
  },
  beforeDestroy(){
    console.log(this.$route)
    this.$store.commit("setIsShow", true);
  },
  watch:{
    locList:{
      deep: true,
      handler(){
        localStorage.setItem('Lover',JSON.stringify(this.locList))
      }
    }
  }
};
</script>
 
<style scoped lang="sass">
$bg: rgb(242,242,242)
.shopping
  width: 100%
  .header
    width: 100%
    height: .5rem
    position: fixed
    left: 0
    top: 0
    display: flex
    justify-content: space-between
    background: $bg
    text-align: center
    line-height: .5rem
    font-size: .15rem
    padding: 0 .1rem
  .center
    margin-top: .4rem
  .bottomBnt
    width: 100%
    height: .55rem
    position: fixed
    bottom: 0
    display: flex
    border-top: 1px solid #ccc
    .range
      width: 33%
      background: #fff
      text-align: center
      color: #999
      span
        font-size: .23rem
        color: #ff5722
        font-weight: bold
    button
      width: 33.5%
      // background: #000
      // border: 1px solid #ccc
      font-size: .14rem
    .pricDiu
      background: #ff5722
      color: #fff
</style>